import React, { useState, useEffect } from 'react';
import styles from './style.less';
import { Table, Space, Row, Col, Button } from 'antd';
import Footer from '@/components/Global/Footer';
import { ColumnsType } from 'antd/es/table';
import { AccountColumn } from './data';
import { getAccountList } from './service';
import { history } from 'umi';
import ModalComp from '@/components/Global/Modal/index';

// function onChange(checked: boolean) {
//   console.log(`switch to ${checked}`);
// }

// 登录按钮点击
const loginClick = (row: any) => {
  console.log(row);
  history.push({
    pathname: '/information/promotion_accounts/detail',
    query: {
      id: row.id,
      platformChannel: row.platformChannel,
      username: row.username
    }
  });
  return undefined;
}

const columns: ColumnsType<AccountColumn> = [
  {
    title: '平台',
    key: 'platformChannel',
    dataIndex: 'platformChannel',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '业务',
    key: 'businessType',
    dataIndex: 'businessType',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '账户名',
    key: 'username',
    dataIndex: 'username',
    className: styles.content,
    // align: 'center',
  },
  {
    title: '密码',
    key: 'password',
    dataIndex: 'password',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '状态',
    key: 'status',
    dataIndex: 'status',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '创建者',
    key: 'createUser',
    dataIndex: 'createUser',
    className: styles.content,
    // align: 'center'
  },
  {
    title: '操作',
    // align: 'center',
    key: 'action',
    className: `${styles.content} ${styles.action}`,
    width: 350,
    render(row) {
      // console.log(row);
      let dom;
      if (row.status === '0') {
        dom = (
          <Space size="middle">
            <Button type="text">授权</Button>
            <Button type="text">编辑</Button>
            <Button type="text">删除</Button>
          </Space>
        );
      } else {
        // dom = (
        //   <Space size="middle">
        //     <Button type="text">取消授权</Button>
        //     <Button type="text">编辑</Button>
        //     <Button type="text" onClick={loginClick(row)}>登录</Button>
        //   </Space>
        // );
        dom = (
          <Space size="middle">
            <Button type="text">取消授权</Button>
            <Button type="text">编辑</Button>
            <Button type="text" onClick={(() => loginClick(row))}>登录</Button>
            {/* <a>取消授权</a>
            <a>编辑</a>
            <a onClick={(() => loginClick(row))}>登录</a> */}
          </Space>
        );
      }
      return dom;
    }
    // render: () => (
    //   // text:string, record:object
      // <Space size="middle">
      //   <a>授权</a>
      //   <a>编辑</a>
      //   <a>删除</a>
      //   <a>登录</a>
      // </Space>
    // ),
  },
  // {
  //   title: '启用/暂停',
  //   dataIndex: 'changeStatus',
  //   key: 'changeStatus',
  //   // align: 'center'
  //   className: styles.content,
  //   width: 150,
  //   render(text: string, row) {
  //     // console.log(text, row, index);
  //     return row.planStatus ? (
  //       <>
  //         <Switch defaultChecked={row.planStatus !== '0'} onChange={onChange} />
  //         <label>{row.planStatus === '0' ? '启动' : '停用'}</label>
  //       </>
  //     ) : (
  //       <div>-</div>
  //     );
  //   },
  // },
];

let params = {};

export default function AccountsTable() {
  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState(1);
  const [modalFlag, setModalFlag] = useState(false)

  const addAccount = () => {
    setModalFlag(true);
  };

  const onFinish = (value: any) => {
    console.log(value);

  }

  useEffect(() => {
    getAccountList(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res);
        setPage(1);
        // setTableData([]);
      }
    });
  }, []);
  return (
    <>
      <Row>
        <Col flex="auto">
          <Table<AccountColumn>
            dataSource={tableData}
            columns={columns}
            pagination={false}
            rowKey={(record) => record.id}
            // locale={{ emptyText: "空空如也呀~" }}
            scroll={{ y: 600 }}
          ></Table>
        </Col>
      </Row>
      <Footer
        footer={styles.footer}
        length={tableData.length}
        current={page}
        buttonGroup={
          <>
            <Button className={styles.addBtn} onClick={addAccount}>
              添加账号
            </Button>
          </>
        }
      />
      <ModalComp modalFlag={modalFlag} setModalFlag={setModalFlag} type={''} width={400} onFinish={onFinish}/>
    </>
  );
}
